<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSGO Update to CS2</title>
    <style>
        .active {
            border: 10px solid sandybrown;
        }

        .small img {
            max-width: 80px;
            /* 最大宽度：800像素 */
            max-height: 60px;
            /* 最大高度：600像素 */
            height: auto;
            /* 保持宽高比（可选，默认值） */
        }
    </style>
</head>

<body>

    <div id="app">

        <button @click="isImageVisible = !isImageVisible"> {{ isImageVisible ? '隐藏图片' : '显示图片' }}</button>
        <!-- 带 v-show 指令的图片 -->
        <div v-show="isImageVisible">
            <img src="https://img95.699pic.com/photo/50068/4672.jpg_wh300.jpg!/fh/300/quality/90" alt="示例图片"
                style="max-width: 600px; margin-top: 10px;">
        </div>
        <div class="small">
            <img v-bind:src="imgSrc" v-bind:title="imgTitle" :class="{active:isActive}">
            <br><!-- 下面第二种写法，省略了v-bind -->
            <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}">
            <br><!-- active是否生效，取决于isActive的值 -->
            <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="changeActive">
        </div>
    </div>
    <!-- 若获取不了message,稍等,js文件没加载好 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //依旧需要挂载
                isImageVisible: true,  // 初始状态为显示图片
                imgSrc: "https://ts2.tc.mm.bing.net/th/id/OIP-C.s1FygKEZbs_V-7ALwzpgMgHaHa?rs=1&pid=ImgDetMain",
                imgTitle: "阿B LOGO",
                isActive: false
            },
            methods: {
                // 注意写一个函数的正确姿势
                changeActive() {
                    this.isActive = !this.isActive
                    console.log(this.isActive)
                }
            }
        })
    </script>


</body>

</html>